<template>
    <el-main id="myecharts" ></el-main>
</template>

<script>
  let option = {
    title: {
      text: '数据折线图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data:[]
    },
    grid: {
      left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'time',
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value'
    },
    series:[]};
  let echarts = require("echarts");
  export default {
    data() {
      return {option:option};
    },
    mounted() {
      this.init();
    },
    props: {
      idName: String,
      title:String,
      legend:{
        type: Object,
        default: () => {
          return {
            type:'plain',
            data: []
          };
        }
      },
      xAxis:{
        type: Object,
        default: () => {
          return {
            type: 'time',
            splitLine: {
              show: false
            }
          };
        }
      },
      yAxis:{
        type: Object,
        default: () => {
          return {
            type: 'value'
          };
        }
      },
      serieName:{
        type: Array,
        default: () => {
          return [];
        }
      },
      serieType:{
        type: Array,
        default: () => {
          return [];
        }
      },
      serieStack:{
        type: Array,
        default: () => {
          return [];
        }
      },
      serieData:{
        type: Array,
        default: () => {
          return [];
        }
      }
    },
    watch:{
      'serieData':'init'
    },
    methods:{
      init:function () {
        option.title.text = this.title;
        option.legend = this.legend;
        option.xAxis = this.xAxis;
        option.yAxis = this.yAxis;
        option.series = [];

        for(let i = 0;i<this.serieName.length;i++){
          let obj = {};
          obj.name = this.serieName[i];
          obj.type = this.serieType[i]||this.serieType[0];
          obj.stack = this.serieStack[i]||this.serieStack[0];
          obj.data = this.serieData[i];
          option.series.push(obj);
        }
        let myChart = echarts.init(document.getElementById('myecharts'));
        myChart.setOption(option);
      }
    }
  }
</script>
<style>
  #myecharts {
    height: 300px;
  }
</style>

